<template>
  <el-select :value="selectValue" @change="$emit('change', $event)" class="select">
    <el-option
      v-for="(option, index) in options"
      :key="index"
      :label="option.name"
      :value="option.id"
      class="option"
    >
      <simple-recipe-info :recipe="option"></simple-recipe-info>
    </el-option>
  </el-select>
</template>

<script>
import { options } from "less";
import SimpleRecipeInfo from "./SimpleRecipeInfo.vue";
export default {
  components: { SimpleRecipeInfo },
  name: "recipeSelect",
  props: {
    selectValue: {
      type: Number,
      default: 0,
    },
    options: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      selRecipe: 0,
    };
  },
  methods: {
	  handleFindRecipe(id){
		  console.log(id);
		  return this.options.find((o)=>{ o.id == id })
	  }
  },
  created(){
  },
  model: {
    // 负责将对应的事件值传给父组件v-model绑定的变量
    prop: "selectValue",
    event: "change", // 这个触发事件对应元素自身的事件，比如输入框就是input
  },
};
</script>

<style scoped>
.select{
    width: 100%;
}
.option{
    width: 100%;
    height: 90px;
}
</style>
